<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isAgreed = ref(false)
const hasScrolledToBottom = ref(false)

// 监听滚动到底部
function handleScroll(event: Event) {
  const target = event.target as HTMLElement
  const { scrollTop, scrollHeight, clientHeight } = target

  // 当滚动到底部时
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    hasScrolledToBottom.value = true
  }
}

// 确认协议
function confirmAgreement() {
  if (!isAgreed.value) {
    return
  }

  // 设置协议已同意状态到localStorage
  localStorage.setItem('userAgreementAccepted', 'true')

  // 返回到上一页
  router.back()
}

// 检查是否已经同意协议
onMounted(() => {
  const accepted = localStorage.getItem('userAgreementAccepted')
  if (accepted === 'true') {
    isAgreed.value = true
  }
})
</script>

<template>
  <div class="agreement-container">
    <!-- 协议内容 -->
    <div class="agreement-content" @scroll="handleScroll">
      <div class="agreement-body">
        <h1 class="agreement-title">
          软件使用协议书
        </h1>

        <div class="agreement-section">
          <h2>第一条 软件使用许可</h2>
          <p>本软件为中国国际贸易促进委员会培训中心6C考试报名系统，用户在使用本软件前必须仔细阅读并同意本协议的全部条款。</p>
          <p>用户通过注册、登录、使用本软件即表示已阅读、理解并同意接受本协议的全部条款。</p>
        </div>

        <div class="agreement-section">
          <h2>第二条 用户权利与义务</h2>
          <p>2.1 用户有权使用本软件进行6C考试报名、信息查询、考试安排等相关操作。</p>
          <p>2.2 用户应当提供真实、准确、完整的个人信息，并保证信息的及时更新。</p>
          <p>2.3 用户有义务保护账号安全，不得将账号转让、出售或以其他方式许可他人使用。</p>
          <p>2.4 用户不得利用本软件进行违法违规活动，不得恶意操作影响系统正常运行。</p>
        </div>

        <div class="agreement-section">
          <h2>第三条 隐私保护</h2>
          <p>3.1 我们承诺按照相关法律法规保护用户个人信息安全。</p>
          <p>3.2 用户个人信息包括但不限于姓名、身份证号、手机号、邮箱等。</p>
          <p>3.3 未经用户同意，我们不会向第三方披露用户个人信息。</p>
        </div>

        <div class="agreement-section">
          <h2>第四条 知识产权</h2>
          <p>4.1 本软件的所有内容均受知识产权法保护。</p>
          <p>4.2 未经许可，用户不得复制、传播、修改本软件内容。</p>
          <p>4.3 用户上传的内容，用户保证拥有相应的知识产权或合法授权。</p>
        </div>

        <div class="agreement-section">
          <h2>第五条 服务变更</h2>
          <p>5.1 我们有权根据业务需要调整服务内容。</p>
          <p>5.2 如用户违反本协议，我们有权暂停或终止服务。</p>
          <p>5.3 用户有权随时停止使用本软件。</p>
        </div>

        <div class="agreement-section">
          <h2>第六条 免责声明</h2>
          <p>6.1 本软件按"现状"提供，我们不保证服务的连续性、及时性、准确性。</p>
          <p>6.2 因不可抗力、网络故障等原因导致的服务中断，我们不承担责任。</p>
          <p>6.3 用户因使用本软件产生的任何损失，我们不承担责任。</p>
        </div>

        <div class="agreement-section">
          <h2>第七条 争议解决</h2>
          <p>7.1 本协议适用中华人民共和国法律。</p>
          <p>7.2 如发生争议，双方应友好协商解决；协商不成，可向有管辖权的人民法院提起诉讼。</p>
        </div>

        <div class="agreement-section">
          <h2>第八条 其他条款</h2>
          <p>8.1 本协议构成双方完整协议。</p>
          <p>8.2 本协议条款如部分无效，其余条款仍然有效。</p>
          <p>8.3 本协议最终解释权归中国国际贸易促进委员会培训中心所有。</p>
        </div>

        <div class="agreement-footer">
          <p class="contact-info">
            如有疑问，请联系：19290112870  某老师 中国国际贸易促进委员会培训中心
          </p>
        </div>
      </div>
    </div>

    <!-- 底部确认区域 -->
    <div v-if="hasScrolledToBottom" class="agreement-bottom">
      <div class="checkbox-section">
        <input
          id="agree-checkbox"
          v-model="isAgreed"
          type="checkbox"
        >
        <label for="agree-checkbox">
          我已经阅读
        </label>
      </div>
      <button
        class="confirm-btn"
        :disabled="!isAgreed"
        @click="confirmAgreement"
      >
        确认
      </button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.agreement-container {
  min-height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.agreement-content {
  flex: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background: white;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 0 1px #000;
}

.agreement-body {
  line-height: 1.6;
  color: #000000;
  font-family: '宋体', 'SimSun', serif;
}

.agreement-title {
  text-align: center;
  color: #000000;
  font-size: 24px;
  margin-bottom: 30px;
  font-weight: bold;
  font-family: '宋体', 'SimSun', serif;
}

.agreement-section {
  margin-bottom: 20px;

  h2 {
    color: #000000;
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold;
    font-family: '宋体', 'SimSun', serif;
  }

  p {
    margin-bottom: 8px;
    text-align: justify;
    font-size: 14px;
    color: #000000;
    font-family: '宋体', 'SimSun', serif;
  }
}

.agreement-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #000;
  text-align: center;

  .update-time, .contact-info {
    margin: 5px 0;
    color: #000000;
    font-size: 12px;
    font-family: '宋体', 'SimSun', serif;
  }
}

.agreement-bottom {
  background: #ffffff;
  border-top: 1px solid #000;
  padding: 20px;
  text-align: center;
}

.checkbox-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;

  input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
  }

  label {
    font-size: 14px;
    color: #000000;
    cursor: pointer;
    font-family: '宋体', 'SimSun', serif;
  }
}

.confirm-btn {
  background: #000000;
  color: white;
  border: 1px solid #000000;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
  font-family: '宋体', 'SimSun', serif;

  &:hover:not(:disabled) {
    background: #333333;
  }

  &:disabled {
    background: #cccccc;
    border-color: #cccccc;
    cursor: not-allowed;
  }
}

/* 滚动条样式 */
.agreement-content::-webkit-scrollbar {
  width: 8px;
}

.agreement-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.agreement-content::-webkit-scrollbar-thumb {
  background: #666666;
}

.agreement-content::-webkit-scrollbar-thumb:hover {
  background: #333333;
}
</style>
